<template>
  <div v-show="showBackTop" @click="goTop" :class="isLower ? 'c-p-b100' : 'c-p-b154'" class="cart-icon c-brp50 c-pf c-p-c-216 c-ww70 c-hh70 c-flex-row c-justify-center c-aligni-center c-pz100 theme-box-shadow">
    <div class="c-ww70 c-hh70 c-flex-row c-justify-center c-aligni-center c-p">
      <div class="iconfont c-fs34 theme-fc">&#xe962;</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'GoTop',
  props: {
    isLower: {
      type: Boolean,
      default: false,
    },
  },
  computed: {},
  data() {
    return {
      showBackTop: false,
    }
  },

  methods: {
    onScroll() {
      let scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
      this.showBackTop = scrollTop >= 640;
    },
    goTop() {
      window.scrollTo(0, 0);
    },
  },
  mounted() {
    window.removeEventListener("scroll", this.onScroll);
    this.showBackTop = false;
    this.$nextTick(() => {
      window.addEventListener("scroll", this.onScroll);
    })
  },
  destroyed() {
    window.removeEventListener("scroll", this.onScroll);
  }
}
</script>

<style scoped>
.cart-icon{
  background:rgba(255,255,255,0.92);
}
.c-p-b154 {
  bottom: 3.85rem;
}
</style>
